<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/css/basic.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet"
          type="text/css">
    <script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <style type="text/css">
        .btn-sm {
            border-width: 4px;
            font-size: 13px;
            padding: 4px 9px;
            line-height: 1.39;
        }

        .code_space {
            margin-left: -4px;
            margin-right: 14px;
        }

        .btn_key {
            background-color: #6fb3e0 !important;
            border-color: #6fb3e0;
        }

        .btn_key:hover {
            color: #fff;
            background-color: #39b3d7;
            border-color: #269abc;
        }

        .code_width {
            width: 36.5%;
        }

        @media only screen and (max-width: 767px ) {
            .code_width {
                width: 102%;
            }
        }

        .radios {
            margin-bottom: 20px;
            float: left;
            margin-left: 40px;
        }
    </style>
</head>
<body>
<div class="content">
	
	<!-- 数据Form  -->
    <form class="form-horizontal" id="addForm">
	    <br>
        <input id="id" type="hidden" name="id" value="${bindCardInfo.id}"/>
		 <div class="form-group">
            <label for="personName" class="col-sm-4 control-label">账户类型:</label>
            <div class="col-sm-3">
                <input id="redioValue" type="hidden" value="${bindCardInfo.accountType}"/>
                <input type="radio" id="radio1" name="accountType" value="1" checked/>个 人 账 户 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <%--<input type="radio" id="radio2" name="accountType" value="2"/>企 业 账 户--%>
            </div>
        </div>
        <div class="form-group">
            <label for="personName" class="col-sm-4 control-label"><span style="color:red;">*</span>账户名:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control validate[required]" value="${bindCardInfo.ownName}" id="ownName"
                       name="ownName" placeholder="请输入你的账户名">
            </div>
        </div>
        <div class="form-group" id="shenfengzheng">
            <label for="personTel" class="col-sm-4 control-label"><span style="color:red;">*</span>身份证号:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control validate[required,custom[IDCard]]" value="${bindCardInfo.idCard}"
                       id="idCard" name="idCard" placeholder="请输入你的身份证号码">
            </div>
        </div>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span style="color:red;">*</span>银行卡号:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control  validate[required,custom[number],minSize[16],maxSize[19]]"
                       value="${bindCardInfo.cardNum}" id="cardNum" name="cardNum" placeholder="请输入你的银行卡号"
                       onblur="getBankNameByCardNum()">
            </div>
        </div>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label">所属银行:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control validate[required]" id="bankName" name="bankName"
                       value="${bindCardInfo.bankName}"
                       readonly="readonly" placeholder="由银行卡自动获取">
            </div>
        </div>
         <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span style="color:red;">*</span>验证码:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control validate[required]" id="verificationCode" name="verificationCode"
                       placeholder="请输入你的收到的验证码" style="width: 150px;display:inline;">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" onclick="getValidCode()" class="btn btn-info proving" value="发送">
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-sm-10 text-center">
                <button type="button" id="addBtn" class="btn btn-primary">绑定</button>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" id="unBind" class="btn btn-primary">解绑</button>
            </div>
        </div>
        
    </form>
</div>
<script src="${ctx}/static/js/common/area.js" type="text/javascript"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script src="${ctx}/static/js/common/common.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/base.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/page.js" type="text/javascript"></script>
<script>
    $(function () {

        if ($("#id").val() == null || "" == $("#id").val()) {
            $("#unBind").hide();
        } else {
            if (1 == $("#redioValue").val()) {
                $("#radio1").attr('checked', true);
            } else if (2 == $("#redioValue").val()) {
                $("#radio2").attr('checked', true);
                $("#shenfengzheng").hide();
            }
            $("#radio1").attr('disabled', 'disabled');
            $("#radio2").attr('disabled', 'disabled');
            $("#addBtn").text("保存");
        }
    	
    	$("#addForm").validationEngine({ 
    		promptPosition: "topRight", 
    		validationEventTriggers:"keyup blur", 
    		success :  false,
    		failure : function() { callFailFunction()  }
   		});

    	$("#addBtn").click(function(){
        	
        	//------------1.先验证数据(电话)-----------
	    	var flag = $("#addForm").validationEngine("validate");
	    	if(!flag){
	     		return false;
	    	}

        	//------------2.提交数据-----------
        	$.ajax({
        		async       : false,
        		type 		: "POST",
                url: "${ctx}/api/bankCard/bindCard",
        		data 		: $("#addForm").serialize(),
        		success 	: function( d ) {
        			console.log(d);
        			if(d.code=="200"){
                        alert("绑卡成功!");
                        window.location.href = "${ctx}/api/bankCard/bankCardPage"
                    } else {
                        alert(d.message);
                    }
                }
            });
        });

        $("#unBind").click(function () {
            //------------1.先验证数据(电话)-----------
            var flag = $("#addForm").validationEngine("validate");
            if (!flag) {
                return false;
            }

            //------------2.提交数据-----------
            $.ajax({
                async: false,
                type: "POST",
                url: "${ctx}/api/bankCard/unBindCard",
                data: $("#addForm").serialize(),
                success: function (d) {
                    console.log(d);
                    if (d.code == "200") {
                        alert("解绑成功!");
                        window.location.href = "${ctx}/api/bankCard/bankCardPage"
                    } else {
                        alert(d.message);
                    }
                }
            });
        });
    });

    <!--失去焦点通过银行卡号码获取银行的名称并检查3要素-->
	   function getBankNameByCardNum(){
           var ownName = $("#ownName").val();
           var idCard = $("#idCard").val();
           var cardNum = $("#cardNum").val();

           if (cardNum != null && "" != cardNum) {

               if (ownName != null && "" != ownName) {
                   $.ajax({
                       async: false,
                       url: "/api/bankCard/getBankName",
                       data: {cardNum: cardNum, ownName: ownName, idCard: idCard},
                       type: "POST",
                       dataType: "json",
                       success: function (data) {
                           if (data.code == "200") {
                               $("#bankName").val(data.data);
                           } else {
                               alert(data.message);
                               $("#ownName").val(null);
                               $("#idCard").val(null);
                               $("#cardNum").val(null);
                               $("#bankName").val(null);
                           }
                       }
                   });
               } else {
                   alert('请先填写前面的信息,且重新填写卡号！')
                   $("#cardNum").val(null);
               }
           }
       }


    <!--失去焦点检验3要素-->
    /*function checkBankCard() {

     var ownName = $("#ownName").val();
        var idCard = $("#idCard").val();
        var cardNum = $("#cardNum").val();

        if (ownName != null && "" != ownName && idCard != null && "" != idCard && cardNum != null && "" != cardNum) {
            $.ajax({
                async: false,
                url: "/api/bankCard/checkBankCard",
                data: {cardNum: cardNum, ownName: ownName, idCard: idCard},
                type: "POST",
                dataType: "json",
                success: function (data) {
                    if (data.code == "200") {
                    } else {
                        alert(data.message);
                        $("#ownName").val(null);
                        $("#idCard").val(null);
                        $("#cardNum").val(null);
                        $("#bankName").val(null);
                    }
                }
            });
        }
     }*/


    function sendValidCode() {
        $.ajax({
            async: false,
            url: "/api/bankCard/sendValidCode",
            data: null,
            type: "POST",
            dataType: "json",
            success: function (data) {
                if (data.code == "200") {
                } else {
                    alert(data.message);
                }
            }
        });
    }


    //发送短信验证码
		function getValidCode(){
            var ownName = $("#ownName").val();
            var idCard = $("#idCard").val();
            var cardNum = $("#cardNum").val();


            if (ownName != null && "" != ownName && idCard != null && "" != idCard && cardNum != null && "" != cardNum) {

                /* 发送短信倒计时 */
                var time = 60;
                var s = time + 1;
                var timer = null;

                function countDown() {
                    s--;
                    $('.proving').val('(' + s + ')正在发送');
                    $('.proving').attr("disabled", true);
                    $('.proving').css('background', '#ccc');
                    if (s == 0) {
                        clearInterval(timer);
                        $('.proving').val('重新发送');
                        $('.proving').attr("disabled", false);
                        $('.proving').css('background', '#6ACF33');
                        s = time + 1;
                    }
                }

                countDown();
                timer = setInterval(countDown, 1000);
                sendValidCode();
            } else {
                alert("请先填写前面的内容")
            }




		}
	 
	    //根据所选类型判断是否显示身份证号码   
	    function chooseIdCard() {
	        var id = $("input[name='accountType']").val();
	        if (1 == id) {
	        	$("input[nama='idCard']").show();
	        } else {
	        	$("input[nama='idCard']").hide();
	        }

	    }
	    
	    $(function(){
	    	$("input[name='accountType']").change(function() {
	    		 if ($(this).val() == 1) {
	 	        	$("#shenfengzheng").show();
	 	        } else {
	 	        	$("#shenfengzheng").hide();
	 	        }
	    	});
	    	}); 

</script>
</body>